<template>
    <div>
        <Title titleOne="教职工管理" titleTwo="餐补充值"></Title>
        <el-row style="margin-top: 10px;">
            <el-col :span="10">
                <el-button type="primary" class="btn-size" @click="batchRecharge">批量充值</el-button>
                <el-button type="danger" class="btn-size" @click="batchDeduction">批量扣除</el-button>
            </el-col>

            <el-col :span="14">
                <el-form :inline="true" class="demo-form-inline" :model="params">
                    <el-form-item label="工号">
                        <el-input placeholder="工号" v-model="params.username"></el-input>
                    </el-form-item>
                    <el-form-item label="用户组">
                        <el-select v-model="params.group" placeholder="用户组">
                            <el-option
                                v-for="item in groups"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-table
            ref="multipleTable"
            :data="MealSupplementBalance.data"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            max-height="740px">
            <el-table-column
                type="selection"
                align="center"
                width="55">
            </el-table-column>
            <el-table-column
                prop="users.username"
                label="工号"
                align="center"
                width="200">
            </el-table-column>
            <el-table-column
                prop="users.first_name"
                label="姓名"
                align="center"
                width="200">
            </el-table-column>
            <el-table-column
                label="用户组"
                align="center"
                width="150"
            >
                <template slot-scope="scope">
                    <p v-if="scope.row.users.groups.length===0">无</p>
                    <p v-else>
                        <span v-for="group in scope.row.users.groups">
                            {{group.name}}<br/>
                    </span>
                    </p>
                </template>

            </el-table-column>
            <el-table-column
                prop="meal_supplement_balance"
                label="餐补余额"
                align="center"
            >
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="150"
                align="center"
                v-if="$store.state.userInfo.groups == 1">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="rechargeMoney(scope.row)">充值
                    </el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="deductionMoney(scope.row)">扣除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="MealSupplementBalance.total"
            :page-size="params.page_size"
            :page-sizes="[10, 20, 30, 40, 100]"
            :current-page="params.page"
            layout="prev, pager, next, sizes"
            align="center">
        </el-pagination>
    </div>
</template>

<script>
    import {getMealSupplementBalance, updateMealSupplementBalance, getGroup} from '../../api/api'

    export default {
        name: "recharge",
        data() {
            return {
                MealSupplementBalance: [],
                params: {
                    username: '',
                    group: '',
                    page: 1,
                    page_size: 10,
                },
                groups: [],
                Recharge: {
                    id: null,
                    isRecharge: 1,
                    order_price: null
                },
                multipleSelection: []
            }
        },
        created() {
            this.listMealSupplementBalance(this.params);
            this.listGroup();
        },
        methods: {
            listMealSupplementBalance(params) {
                getMealSupplementBalance(params).then(res => {
                    this.MealSupplementBalance = res.data;
                }).catch(err => {
                    console.log(err);
                })
            },
            listGroup: function () {
                getGroup().then((response) => {
                    this.groups = response.data;
                }).catch(function (error) {
                    console.log(error);
                });
            },
            changeMealSupplementBalance() {
                getMealSupplementBalance().then(res => {
                    this.MealSupplementBalance = res.data;
                }).catch(err => {
                    console.log(err);
                })
            },
            search() {
                this.listMealSupplementBalance(this.params);
            },
            rechargeMoney(row) {
                let _this = this;
                this.$prompt('请输入充值金额', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^[0-9]+(.[0-9]{2})?$/,
                    inputErrorMessage: '请输入合法的金额'
                }).then(({value}) => {
                    this.Recharge.id = null;
                    this.Recharge.order_price = null;
                    this.Recharge.isRecharge = 1;
                    this.Recharge.id = row.id;
                    this.Recharge.order_price = value;
                    updateMealSupplementBalance(this.Recharge).then(res => {
                        this.listMealSupplementBalance(this.params);
                        this.$message({
                            type: 'success',
                            message: '充值金额是: ' + value
                        });

                    }).catch(err => {
                        console.log(err);
                        _this.$message({
                            type: 'error',
                            message: '充值失败'
                        });
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            },
            deductionMoney(row) {
                let _this = this;
                this.$prompt('请输入扣除金额', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^[0-9]+(.[0-9]{2})?$/,
                    inputErrorMessage: '请输入合法的金额'
                }).then(({value}) => {
                    this.Recharge.id = null;
                    this.Recharge.order_price = null;
                    this.Recharge.isRecharge = 0;
                    this.Recharge.id = row.id;
                    this.Recharge.order_price = value;
                    updateMealSupplementBalance(this.Recharge).then(res => {
                        this.listMealSupplementBalance(this.params);
                        this.$message({
                            type: 'success',
                            message: '扣除金额是: ' + value
                        });
                    }).catch(err => {
                        _this.$message({
                            type: 'error',
                            message: err.Message
                        });
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            },
            batchRecharge() {
                let _this = this;
                if (this.multipleSelection) {
                    let rows = this.multipleSelection;
                    let order_post = [];
                    this.$prompt('请输入充值金额', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPattern: /^[0-9]+(.[0-9]{2})?$/,
                        inputErrorMessage: '请输入合法的金额'
                    }).then(({value}) => {
                        rows.forEach((row) => {
                            let aa = {};
                            aa['id'] = row.id;
                            aa['order_price'] = value;
                            aa['isRecharge'] = 1;
                            order_post.push(aa);
                        });
                        order_post.forEach((row, index, array) => {
                            if (index === array.length - 1) {
                                updateMealSupplementBalance(row).then(res => {
                                    this.listMealSupplementBalance(this.params);
                                    this.$message({
                                        type: 'success',
                                        message: '充值金额是: ' + value
                                    });
                                }).catch(err => {
                                    console.log(err);
                                    _this.$message({
                                        type: 'error',
                                        message: '充值失败' + row.username
                                    });
                                });
                            } else {
                                updateMealSupplementBalance(row).then(res => {
                                    this.listMealSupplementBalance(this.params);
                                }).catch(err => {
                                    console.log(err);
                                    _this.$message({
                                        type: 'error',
                                        message: '充值失败' + row.username
                                    });
                                });
                            }
                        });
                    }).catch((e) => {
                        console.log(e);
                        this.$message({
                            type: 'info',
                            message: '取消输入'
                        });
                    });


                }
            },
            batchDeduction() {
                let _this = this;
                if (this.multipleSelection) {
                    let rows = this.multipleSelection;
                    let order_post = [];
                    this.$prompt('请输入扣除金额', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPattern: /^[0-9]+(.[0-9]{2})?$/,
                        inputErrorMessage: '请输入合法的金额'
                    }).then(({value}) => {
                        rows.forEach((row) => {
                            let aa = {};
                            aa['id'] = row.id;
                            aa['order_price'] = value;
                            aa['isRecharge'] = 0;
                            order_post.push(aa);
                        });
                        order_post.forEach((row, index, array) => {
                            if (index === array.length - 1) {
                                updateMealSupplementBalance(row).then(res => {
                                    this.listMealSupplementBalance(this.params);
                                    this.$message({
                                        type: 'success',
                                        message: '扣除金额是: ' + value
                                    });
                                }).catch(err => {
                                    this.listMealSupplementBalance(this.params);
                                    console.log(err);
                                    _this.$message({
                                        type: 'error',
                                        message: '扣除失败' + row.username
                                    });
                                });
                            } else {
                                updateMealSupplementBalance(row).then(res => {

                                }).catch(err => {
                                    this.listMealSupplementBalance(this.params);
                                    console.log(err);
                                    _this.$message({
                                        type: 'error',
                                        message: '扣除失败' + row.username
                                    });
                                });
                            }
                        });

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消输入'
                        });
                    });


                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            sid4() {
                return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
            },
            guid() {
                return (this.sid4() + this.sid4() + this.sid4() + this.sid4() + this.sid4() + this.sid4() + this.sid4() + this.sid4());
            },
            uuid() {
                let s = [];
                let hexDigits = "0123456789abcdef";
                for (let i = 0; i < 32; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                }
                s[13] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
                s[18] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
                // s[8] = s[13] = s[18] = s[23] = "-";

                let uuid = s.join("");
                return uuid;
            },
            handleSizeChange(val) {
                this.params.page_size = val;
                this.listMealSupplementBalance(this.params);
            },
            handleCurrentChange(val) {
                this.params.page = val;
                this.listMealSupplementBalance(this.params);
            }
        }
    }
</script>

<style scoped>

</style>
